<!doctype html>
<link rel="stylesheet" href="s.css" />
<h1>Tests for <a href="../../../">recipes</a>/<a href="../../">form</a>/<a href="../">skin</a>/natural</h1>
<p class="doc">
    Note: Clicks on labels adjacent to inputs does not give focus (no for="" defined)
</p>
<form>
    <label class="form-element">Input in label,label text before input <input /> </label>

    <label class="form-element"> <input /> Input in label,label text after input</label>

    <p class="form-element">
        <label>Label before</label> <input />
    </p>

    <p class="form-element">
        <input /> <label>Label after</label>
    </p>

    <label class="form-element">Select in label,label text before input <select></select> </label>

    <label class="form-element"> <select></select> Select in label,label text after input</label>

    <p class="form-element">
        <label>Label before</label> <select></select>
    </p>

    <p class="form-element">
        <select></select> <label>Label after</label>
    </p>

    <label class="form-element">Textarea in label,label text before input <textarea></textarea> </label>

    <label class="form-element"><textarea></textarea> Textarea in label,label text after input</label>

    <p class="form-element">
        <label>Label before</label> <textarea></textarea>
    </p>

    <p class="form-element">
        <textarea></textarea> <label>Label after</label>
    </p>

    <button>Button</button>

</form>
